{extend name="base/basic" /}
{block name="title"} 首页 {/block}
<!-- Page Content -->
{block name="content"}
<div style="padding-top: 11px">
    <!--  头部工具-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" onclick="javascript:window.location.reload();" lay-event="">刷新</button>
        </div>
    </script>
    <!--  头部工具-->

    <!-- 表格容器-->
    <table id="myTable" lay-filter="myTable" class="layui-tab" lay-even lay-skin="line" lay-size="lg"></table>
    <!-- 表格容器-->
    <script type="text/html" id="img">
        {{#  if(d.img === undefined || d.img === '' || d.img === null){ }}
        暂无图片
        {{#  } else { }}
        <div> <a  lay-event="lookImg"><img width='40' title="点击放大" style="cursor: pointer;" height='40' higth id="myImg" src="{{ d.img}}"/></a>  </div>
        {{#  } }}
    </script>
    <!-- 状态模板 -->
    <script type="text/html" id="buttonTpl2">
        {{#  if(d.type == 1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">PC</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="check">手机</a>
        {{#  } }}
    </script>
    <script type="text/html" id="buttonTpl3">
        {{#  if(d.site == 1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">左上角</a>
        {{#  } else if(d.site == 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">右上角</a>
        {{#  } else if(d.site == 3){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">轮播</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-xs" lay-event="check">底部</a>
        {{#  } }}
    </script>
    <!-- 状态模板 -->

    <!--  行工具按鈕-->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--  行工具按鈕-->
</div>
<!-- /Page Content -->
{/block}
{block name="js"}
<script src="/static/jquery/jquery-3.5.1.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        //表格初始化
        table.render({
            elem: '#myTable'
            ,even:true
            ,toolbar:  "#toolbarDemo" // 头部工具栏
            ,url: "{:url('listData')}"//数据接口
            ,page:true
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80,fixed: 'left'}
                ,{field: 'url', title: '跳转链接'}
                ,{field: 'img', title: '图片(点击放大)',templet:"#img"}
                ,{field: 'type', title: '应用',toolbar:'#buttonTpl2'}
                ,{field: 'site', title: '位置',toolbar:'#buttonTpl3'}
                ,{field: 'sort', title: '排序值'}
                ,{fixed: 'right',title:'操作', align:'center', toolbar: '#bar'} //这里的toolbar值是模板元素的选择器
            ]]
            ,text: {
                none: '暂无相关数据' //默认：无数据。
            }
        });
        //头部按钮事件
        table.on('toolbar(myTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2, // 类型
                        id:'add',
                        anim:4, // 弹出动画 1-6
                        maxmin:true, // 最大最小化
                        offset: 'auto', // 坐标
                        title:'添加',
                        area: ['650px', '700px'], // 宽高
                        shadeClose:true, // 是否点击遮罩关闭
                        content: "{:url('addView')}" //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
        //行工具条事件
        table.on('tool(myTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log(data)
            if(layEvent === 'detail'){ //授权

            } else if(layEvent === 'del'){ //删除
                layer.alert('您确定要删除操作吗?', {
                    skin: 'layui-layer-molv' //样式类名 自定义样式
                    ,title:'删除'
                    , closeBtn: 1 // 是否显示关闭按钮
                    , anim: 1 //动画类型
                    , btn: ['确定', '取消'] //按钮
                    , icon: 6 // icon
                    , yes: function () {
                        $.ajax({
                            type: "POST",
                            url: "{:url('del')}",
                            data: { id: data.id },
                            success: function (e) {
                                if(e.code == 1){
                                    layer.msg(e.msg,{icon:6,time:2000},function (){
                                        obj.del()
                                    },1000)
                                }else{
                                    layer.msg(e.msg,{icon:5,time:2000},function (){
                                        location.reload()
                                    })
                                }
                            }
                        }) //ajax结束
                    }
                    , btn2: function () {
                        console.log('取消啥也不干')
                    }
                });
            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2, // 类型
                    id:'add',
                    anim:4, // 弹出动画 1-6
                    maxmin:true, // 最大最小化
                    offset: 'auto', // 坐标
                    title:'编辑',
                    area: ['650px', '700px'], // 宽高
                    shadeClose:true, // 是否点击遮罩关闭
                    content: "{:url('editView')}?id="+data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
                //同步更新缓存对应的值
                obj.update({
                    // status: data.status
                    title:data.title
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });
    // 放大图片
    $(document).on('click', '#myImg', function(data){
        var image=new Image();
        image.src=data.currentTarget.src;
        var h = image.height;
        var w = image.width;
        //var v = Wh(w,h);
        // w=v[0];
        // h=v[1];
        layer.open({
            closeBtn:0,
            shift:3,
            shadeClose : true, // 点击遮罩关闭层
            area : [ w+"px", h+"px" ],
            type: 1,
            title:false,
            //offset: v[2]+'px',
            content: "<span><img style='height:"+(h-20)+"px;width:"+(w-20)+"px;margin-left:10px;margin-top:10px;' src="+data.currentTarget.src+" /></span>" //注意，如果str是object，那么需要字符拼接。
        }, ($(this)), {open: [2, '#5CBA59'], time: 0});
    });
</script>
{/block}